<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM操作</title>
<style>
    .box{
        width: 200px;
        height:300px;
    }
    .box ::after{
        content: "";
        width: 60px;
        height: 60px;
        background-color: green;
        display: inline-block;
    }
    .yellow::after{
        background-color: yellow;
        content: "";
        width: 60px;
        height: 60px;
        display : inline-block;

    }
</style>
</head>
<body>
    <div class="box"></div>
    <div>
        <strong></strong>
        adfadsf
        <span>12321</span>
    </div>
    <div>
        <h3>获取伪元素样式</h3>
        <p>
            getComputedStyle(div, "after").width
        </p>
    </div>
    <div>
        nodeType 类型

        元素节点 -----------------  1

        属性节点 -----------------  2

        文本节点 ------------------  3
        注释节点 ------------------  8
        document ------------------ 9
        DocumentFragment ---------  11


    </div>
</body>
</html>
<script>
    let strong = document.getElementsByTagName('strong')[0];

    console.log(strong.parentNode);

    let div = document.getElementsByTagName('div')[0];
    console.log(div.childNodes[2]);

    let span = document.getElementsByTagName('span')[0]
    console.log(span.nextSibling);
    console.log(span.previousSibling);

    console.log(div.parentElement)
    console.log(div.children)
    console.log(div.firstElementChild)
    console.log(div.lastElementChild);

    console.log(div.childNodes[2].nodeValue)

    console.log(div.nodeType)

    function ret (node){
        var temp  = {
            length : 0,
            push : Array.prototype.push,
            splice : Array.prototype.splice
        },
        child = node.childNodes,
        len = child.length;
        for(let i = 0; i < len; i ++){
            if (child[i].nodeType == 1) {
                temp.push(child[i]);
            }
        }
        return temp;
    }
    console.log(ret(div));

    // insrtAfter 方法封装  在某个标签后面添加标签

    Element.prototype.insertAfter = function (targetNode, afterNode){
        var beforeNode = afterNode.nextElementSibling;
        if (beforeNode == null) {
              this.appendChild(targetNode);
        }else{
        this.insertBefore(targetNode, beforeNode);            
        }
    }
    var p = document.createElement('p');
    var b = document.createElement('b');

    var f = new Date().getTime();
    for(var i = 0; i < 1000000; i ++){
    } 
    var d = new Date().getTime();
    console.log(d - f);

        let box =  document.getElementsByClassName('box')[0]
        box.onclick = function(){
        
        }
</script>